<template>
  <div class="page-production">
    <div class="dialog-header">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(img,index) in detail.urls" :key="index">
          <img-box :imgSrc="img" width="590" height="400"></img-box>
        </el-carousel-item>
      </el-carousel>
      <div class="dialog-header-content xui-margin-top-lg xui-padding-bottom-xl">
        <!-- <div class="title">
          <span>【审核状态】</span>
          <p class="xui-text-truncate" :class="{'color-red':detail.state == 2, 'color-green':detail.state == 1}" style="font-size:15px">{{status}}</p>
          <p v-if="remark && $route.name == 'userCenter-myArt'" class="xui-text-truncate remark-content">审核意见：{{remark}}</p>
        </div> -->
        <div class="title">
          <span>【作品名称】</span>
          <p class="xui-text-truncate">{{detail.title}}</p>
        </div>
        <div class="info">
          <span>【作品简介】</span>
          <p class="bodyFont" ref="bodyFont" :class="{bodyHeight:isActive}">
            {{detail.content}}
          </p>
        </div>
        <div class="all-text" @click="contentToggle()">
          <span>{{btnText}}</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
        <div class="icon">
          <span v-if="detail.isAgree == 'Y'" class="color-primary">
            <i class="iconfont icon-dianzan-fill"></i> 已赞</span>
          <span v-else class="color-gray" @click="agree" style="cursor:pointer">
            <i class="iconfont icon-dianzan"></i> 点赞</span>
          <!-- <span class="color-gray xui-margin-right-md"> <i class="iconfont icon-fenxiang"></i> 分享</span> -->
        </div>
      </div>

    </div>
    <div class="dialog-comment xui-padding-sm">
      <el-form ref="commentForm" :model="form" class="form-comment" :rules="form.rules">
        <el-form-item class="input-comment" prop="comment">
          <el-tag
            :key="tag"
            v-for="tag in reply.dynamicTags"
            closable
            :disable-transitions="true"
            @close="handleCloseTag(tag)">
            {{tag}}
          </el-tag>
          <el-input :class="{reply: commentType == 2}" v-model="form.comment" placeholder="说点什么..."></el-input>
        </el-form-item>
        <div class="btn-comment">
          <el-button plain @click="submitMyComment('commentForm')">评论</el-button>
        </div>
      </el-form>

      <div class="comment-content xui-margin-top-sm">
        <h4>全部评论</h4>
        <ul class="xui-margin-bottom-sm">
          <li v-for="(item,index) in comments" :key="index" class="xui-padding-vertical-sm">
            <!-- <div class="avatar">
              <img :src="item.avatar"/>
            </div> -->
            <div class="follow">
              <!-- <span class="xui-fr color-gray"> <i class="iconfont icon-dianzan"></i> 5</span> -->
              <!-- <span class="xui-fr color-gray xui-margin-right-md"> <i class="iconfont icon-BAI-pinglun"></i> 2</span> -->
            </div>
            <div>
              <span class="name">
                {{item.mname || '网友评论'}}
              </span>
              <span class="time">
                {{item.stAct | formatTime}}
              </span>
              <span v-if="userID == detail.uid" class="color-primary reply-btn" @click="switchToReply(item)">回复</span>
            </div>
            <p>
              {{item.content}}
            </p>
            <div v-if="item.list.length" class="reply-wrap">
              <div class="reply" v-for="reply in item.list" :key="reply.id">
                <div>
                  <p class="name">
                    {{reply.mname || '网友评论'}} <span class="color-gray" style="font-weight:normal">回复：</span>
                    <!-- <span class="time">
                      {{reply.stAct | formatTime}}
                    </span> -->
                  </p>
                </div>
                <p>
                  {{reply.content}}
                </p>
              </div>
            </div>
          </li>
        </ul>
        <div class="all-text">
          <span>显示全部</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import imgBox from "@/components/widge/img-box";
import {
  likeArt,
  getArtCommentList,
  postArtComment,
  getArtDetail
} from "@/api/artCollect";
import { addBrowseNum } from "@/api/detail";
import { formatTime, parseTime } from "@/utils";

export default {
  components: {
    imgBox
  },
  props: ["detail"],
  data() {
    return {
      form: {
        comment: "",
        rules: {
          comment: [
            {
              required: true,
              message: "长度在3到200个字之间",
              min: 3,
              max: 200
            }
          ]
        }
      },
      commentType: 1, // 评论类型， 1:评论； 2:回复
      isActive: false,
      curHeight: 0,
      bodyHeight: 999999999999,
      btnText: "展开全文",
      comments: [],
      myComment: "",
      remark: "",
      reply: {
        curCommentId: null,
        dynamicTags: []
      }
    };
  },
  computed: {
    status() {
      let result = "";
      switch (this.detail.state) {
        case 0:
          result = "待审核";
          break;
        case 1:
          result = "审核通过";
          break;
        case 2:
          result = "审核不通过";
          break;
      }
      return result;
    },
    userID() {
      return this.$store.getters.userId;
    },
    vid() {
      if (this.commentType == 1) {
        return this.detail.id;
      } else if (this.commentType == 2) {
        return this.reply.curCommentId;
      }
    }
  },
  methods: {
    test() {
      console.log("test");
    },
    contentToggle() {
      this.curHeight = this.$refs.bodyFont.offsetHeight;
      if (this.curHeight < this.bodyHeight) {
        this.isActive = !this.isActive;
        this.btnText = this.isActive === true ? "收起" : "展开全文";
      } else {
        this.btnText = "展开全文";
      }
      console.log(this.contentStatus);
    },
    agree() {
      let userId = this.$store.getters.userId;
      likeArt(this.detail.id, userId).then(res => {
        if (res.msg == "添加成功") {
          this.$message({
            showClose: true,
            type: "success",
            msg: "点赞成功"
          });
        }
        this.detail.isAgree = "Y";
      });
    },
    getComment() {
      getArtCommentList(this.detail.id).then(res => {
        this.comments = res.data.recordsList;
      });
    },
    postMyComment(id, comment) {
      let userId = this.$store.getters.userId;
      postArtComment(id, userId, comment).then(res => {
        this.$message({
          showClose: true,
          type: "success",
          massage: "发布成功"
        });
      });
    },
    submitMyComment(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userId = this.$store.getters.userId;
          postArtComment(
            this.vid,
            userId,
            this.form.comment,
            this.commentType
          ).then(res => {
            this.$message({
              showClose: true,
              message: "发布成功，审核通过后显示该评论",
              type: "success"
            });
            this.$refs[formName].resetFields();
          });
        } else {
          this.$message({
            showClose: true,
            message: "评论内容需要在3～200个字符之间",
            type: "error"
          });
        }
      });
    },
    addBrowseNum() {
      addBrowseNum(this.detail.id, 5);
    },
    getRemark() {
      this.remark = "";
      getArtDetail(this.detail.id, this.userID).then(res => {
        let str = res.data.remark;
        let index = str.indexOf(":");
        if (index == -1) {
          return false;
        }
        this.remark = str.slice(index + 1).trim();
      });
    },
    switchToReply(commentItem) {
      this.commentType = 2;
      this.reply.curCommentId = commentItem.id;
      this.reply.dynamicTags = [];
      this.reply.dynamicTags.push(`回复 ${commentItem.mname}`);

      window.setTimeout(function() {
        let width =
          document.querySelector(".page-production .form-comment .el-tag")
            .clientWidth + 15;
        document.querySelector(
          ".page-production .el-input .el-input__inner"
        ).style.paddingLeft =
          width + "px";
        console.log("width", width);
      }, 20);

      // width + 20 + "px";
    },
    handleCloseTag(tag) {
      this.reply.dynamicTags = [];
      this.commentType = 1;
      this.reply.curCommentId = null;
      document.querySelector(
        ".page-production .el-input .el-input__inner"
      ).style.paddingLeft =
        "15px";
    }
  },
  mounted() {
    this.getComment();
    this.addBrowseNum();
    this.getRemark();
  },
  watch: {
    detail: function() {
      this.getComment();
      this.getRemark();
    }
  },
  filters: {
    formatTime: function(value) {
      if (!value) return "";
      return value.split(" ")[0];
    }
  }
};
</script>

<style lang="less">
.page-production {
  .bodyHeight {
    height: auto !important;
  }

  .bodyFont {
    height: 68px;
    overflow: hidden;
    max-height: 100%;
  }

  .dialog-header {
    border-bottom: 1px solid #eeeeee;
    .dialog-header-content {
      position: relative;
      .title span,
      .info span {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #b2914f;
        vertical-align: top;
      }
      p {
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        color: #000;
        width: 80%;
        vertical-align: top;
      }
      .all-text {
        float: right;
        cursor: pointer;
        span {
          font-size: 14px;
          color: #bebebe;
        }
        i {
          color: #c0c0c0;
        }
      }
      .icon {
        position: absolute;
        right: 0;
        top: 0;
        span {
          font-size: 14px;
        }
      }
      .remark-content {
        margin-left: 100px;
        color: #888;
        font-size: 12px;
        background: #f7f7f7;
        padding: 0 10px;
      }
    }
  }

  .dialog-comment {
    .all-text {
      width: 75px;
      margin: auto;
    }
  }

  .form-comment {
    position: relative;
    .input-comment {
      .el-tag {
        position: absolute;
        left: 5px;
        top: 5px;
        z-index: 50;
      }
      .el-input.reply {
        .el-input__inner {
          // padding-left: 120px !important;
        }
      }
      .el-input__inner {
        padding-right: 80px;
      }
    }
    .btn-comment {
      position: absolute;
      right: 5px;
      top: 5px;

      .el-button {
        border: 1px solid #dbad23;
        color: #dbad23;
        padding: 7px 20px;
      }
      .el-button:hover {
        background: #dbad23;
        color: #fff;
      }
    }
  }

  .comment-content {
    h4 {
      font-size: 16px;
      margin-bottom: 0;
    }
    li {
      border-bottom: 1px solid #f5f5f5;
    }
    .avatar {
      float: left;
      width: 52px;
      height: 52px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        border-radius: 50%;
      }
    }
    .follow {
      float: right;
      margin-top: 5px;
      padding: 0;
      font-size: 13px;
    }
    .name {
      padding-top: 4px;
      font-size: 14px;
      display: inline-block;
      color: #444444;
      font-weight: bold;
      vertical-align: middle;
    }
    .time {
      display: inline-block;
      padding: 4px 0 0 3px;
      font-size: 12px;
      color: #969696;
      vertical-align: middle;
    }
    .reply-btn {
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      line-height: 25px;
      padding-top: 3px;
      margin-left: 6px;
    }
    .reply-btn:hover {
      color: #b38f48;
      text-decoration: underline;
    }
    .reply-wrap {
      padding: 10px 15px;
      background-color: #f8f5f0;
      .reply {
        margin-bottom: 5px;
        .name {
          font-size: 13px;
          padding-top: 0;
        }
      }
    }
    p {
      margin-top: 2px;
      font-size: 12px;
      color: #444444;
    }
    .all-text {
      span {
        font-size: 14px;
        color: #dbad23;
      }
      i {
        color: #bf9c51;
      }
    }
  }
}
</style>
